<template>
  <div class="address_wrapper">
    <van-nav-bar
      title="收货信息"
      class="nav_bar"
      fixed
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="list">
      <addressItem v-for="(v, i) in list" :key="i" :item="v" />
    </div>
    <div class="bottom">
      <div class="btn" @click="goDetail">添加收货地址</div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import addressItem from "@/components/addressItem.vue";
export default {
  components: {
    addressItem,
  },
  props: {},
  data() {
    return {
      list: [],
    };
  },
  watch: {},
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    goDetail() {
      this.$router.push({
        path: "/addressDetail",
      });
    },
    async getAddresslist() {
      let res = await api.getAddresslist();
      this.list = res;
      this.$store.commit("user/SET_ADDRESS", this.list);
    },
  },
  created() {},
  mounted() {
    this.getAddresslist();
  },
};
</script>
<style lang="less" scoped>
.address_wrapper {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 200px 50px 260px 50px;

  .nav_bar {
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
  }

  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 30px 50px 80px 50px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      background: #058efb;
      width: 100%;
      padding: 40px 0;
      font-size: 48px;
      color: #fff;
      border-radius: 999px;
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>
